import { EditModalProps } from '@/typing';
import { ModalForm } from '@ant-design/pro-components';
import type { SubmitterProps } from '@ant-design/pro-form/es/components';
import { Button, type FormInstance, Spin } from 'antd';
import React, { PropsWithChildren } from 'react';

interface DynamicProps {
  readonly?: boolean;
  submitter?:
    | SubmitterProps<{
        form?: FormInstance<any>;
      }>
    | false;
}

const EditModalForm: React.FC<PropsWithChildren<EditModalProps>> = (props) => {
  const readonlyProps: DynamicProps = {
    readonly: true,
    submitter: {
      render: () => {
        return <Button onClick={() => props.onCancel()}>关闭</Button>;
      },
    },
  };
  const notReadonlyProps: DynamicProps = {};

  const dynamicProps = props.readonly ? readonlyProps : notReadonlyProps;

  return (
    <ModalForm
      {...dynamicProps}
      loading={props.loading}
      open={props.editModalOpen}
      formRef={props.editModalFormRef}
      layout={'horizontal'}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      initialValues={{ ...props.initData }}
      modalProps={{
        destroyOnClose: true,

        onCancel: () => props.onCancel(),
      }}
      onFinish={(formData) =>
        props.onSubmit({ ...props.initData, ...formData })
      }
    >
      <Spin spinning={props.loading}>{props.children}</Spin>
    </ModalForm>
  );
};

export default EditModalForm;
